<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>KISSY gallery - ImageTagging</title>
	<link rel="shortcut icon" href="../../../../kissy-dpl/base/assets/favicon.ico"/>
	<link rel="stylesheet" href="../../../../kissy-dpl/base/assets/reset.css"/>
	<link rel="stylesheet" href="../../../../kissy-dpl/base/assets/kissy-docs.css"/>
	<link rel="stylesheet" href="assets/image-tagging.css"/>
<script src="http://docs.kissyui.com/kissy/build/kissy.js"></script>
<script>
    KISSY.config({
        packages:[
            {
                name:"gallery",
                tag:"20111220",
                path:"../../../",  // cdn上适当修改对应路径
                charset:"gbk"
            }
        ]
    });
</script>
<script src="../../../../kissy-dpl/base/assets/kissy-docs.js"></script>
    <style>
        .ks-overlay {
            position:absolute;
            left:-9999px;
            top:-9999px;
        }
    </style>
</head>
<body>
    <div id="header"> 
		<h1 class="logo"><a alt="KISSY" href="http://kissyui.com/"><img src="../../../../kissy-dpl/base/assets/logo.png"/></a></h1>
		<div class="sub-title">Gallery</div>
		<ul class="navigation"> 
			<li><a href="http://blog.kissyui.com/">博客</a></li> 
			<li><a href="http://github.com/kissyteam">源码</a></li> 		
		</ul>
		
	</div> 
    <div id="content">
		<div class="s-crumbs">
			<span>当前位置：</span>
			<a href="http://kissyui.com/">KISSY</a>
			<a href="../../../index.html">Gallery</a>
			<span>ImageTagging</span>
		</div>
			<pre class="s-section">				
作者：qiaofu@taobao.com(乔福)
功能：图片标记组件
描述：对图片上面进行标点
源码：<a href="image-tagging.js">image-tagging.js</a></pre>

			<h3 class="s-title">Demo1 - 数据预先加载并渲染图片</h3>
			<div class="s-section">
				<div class="s-demo">
					<div>
                        <img id="huabao" width="400" src="http://img01.taobaocdn.com/poster_pic/i1/T1EGiHXiVbXXaH.X6X.JPEG_620x10000.jpg" alt="">
                        <!--<img id="huabao1" width="400" src="http://img01.taobaocdn.com/poster_pic/i1/T1bz5FXchrXXaH.X6X.JPEG_620x10000.jpg" alt="包包">-->
                    </div>
					<script>
                        KISSY.use('gallery/image-tagging/1.0/', function(S, ImageTag) {
                            var customClassName = 'greenTag';
                            new ImageTag('#huabao', [
                                {top:60,left:250},
                                {top:320,left:250}
                            ], {
                                tagContent:'+'
                            });
//
                        })
                    </script>
				</div>
				<a class="s-view-code" href="demo.html#">显示源码</a><!--点击该链接自动帮你显示s=demo里的内容，如不需要，去除链接即可-->
			</div>

        <h3 class="s-title">Demo2 - 一个图上面会有多种标记，怎么办？你可以利用tagContent和tagClass配置单个标记，或者对一张图生成多个ImageTag</h3>
			<div class="s-section">
				<div class="s-demo">
					<div>
                        <img id="example2" width="400" src="http://img01.taobaocdn.com/poster_pic/i1/T1bz5FXchrXXaH.X6X.JPEG_620x10000.jpg" alt="包包">
                        <img id="example3" width="400" src="http://img01.taobaocdn.com/poster_pic/i1/T1bz5FXchrXXaH.X6X.JPEG_620x10000.jpg" alt="包包">
                    </div>
					<script>
                        KISSY.use('gallery/image-tagging/1.0/', function(S, ImageTag) {
                            new ImageTag('#example2', [
                                {top:50,left:300},
                                {top:200,left:150}
                            ], {
                                tagContent:function(el) {
                                    if (el.index == 1) {
                                        return '红点';
                                    } else {
                                        return '黑点';
                                    }
                                },
                                tagClass: function(el) {
                                    if (el.index == 1) {
                                        return 'redTag';
                                    } else {
                                        return 'blackTag';
                                    }
                                }
                            });

                            var anotherConfig = {
                                tagClass: 'greenTag',
                                tagContent: '绿'
                            };
                            new ImageTag('#example3',[
                                    {top:250,left:200}
                                ], anotherConfig);
                            var andOneMoreConfig = {
                                tagClass: 'redTag',
                                tagContent: '红'
                            };
                            new ImageTag('#example3', [
                                {top:200,left:150}
                            ], andOneMoreConfig);
                        })
                    </script>
				</div>
				<a class="s-view-code" href="demo.html#">显示源码</a><!--点击该链接自动帮你显示s=demo里的内容，如不需要，去除链接即可-->
			</div>

            <h3 class="s-title">Demo3 - 标记数据异步载入(第二张图片的打点在3秒后加载)</h3>
            <div class="s-section" id="asynHuabao">
            <div class="s-demo">
                <div>
                    <img src="http://img01.taobaocdn.com/poster_pic/i1/T1mimFXdluXXaH.X6X.JPEG_620x10000.jpg">
                    <img src="http://img03.taobaocdn.com/poster_pic/i3/T1kmyFXlBgXXaH.X6X.JPEG_620x10000.jpg">
                </div>
                <script type="text/javascript">
                    KISSY.use('gallery/image-tagging/1.0/',function(S, ImageTag) {
                        var D = S.DOM,
                            imgs = D.query('img', '#asynHuabao'),
                            i = 1;
                        S.each(imgs, function(imgEl, index) {
                            var reqObject = {
                                idx: i++,
                                picSrc : imgEl.src,
                                width: D.width(imgEl),
                                height: D.height(imgEl),
                                userId: 1
                            };
                            if (index == 1) {
                                S.later(function(){
                                    S.jsonp('http://www.taobao.com/go/act/kissy-gallery-image-tagging/render.php', reqObject, function(el) {
                                    new ImageTag(imgEl, el.coords,{
                                                tagClass: 'redTag',
                                                tagContent: '+'
                                            });
                                    });
                                }, 3000);
                            } else {
                                S.jsonp('http://www.taobao.com/go/act/kissy-gallery-image-tagging/render.php', reqObject, function(el) {
                                    new ImageTag(imgEl, el.coords, {
                                        tagContent: '+'
                                    });
                                });
                            }
                        });
                    });
                </script>
                </div>
                <a class="s-view-code" href="demo.html#">显示源码</a>
            </div>

            <h3 class="s-title">Demo4 - 图片广告效果</h3>
            <div class="s-section">
                <div class="s-demo">
                <div>
                    <img id="advertiser" src="http://img04.taobaocdn.com/poster_pic/i4/677250084/T24IN0XnhbXXXXXXXX_!!677250084.jpg_620x10000.jpg">
                </div>
                <script type="text/javascript">
                    KISSY.use('gallery/image-tagging/1.0/', function(S, ImageTag) {
                        var D = S.DOM,E = S.Event,
                            img = D.get('#advertiser');
                        var aNormalTag = new ImageTag(img, [
                            {top:200,left:250},
                            {top:250,left:300}
                        ],{
                            tagContent:function(el) {
                                var index = el.index;
                                if (index == 0) {
                                    return "+";
                                } else if (index == 1) {
                                    return '-';
                                }
                            },
                            tagClass:function(el) {
                                var idx = el.index;
                                if (idx == 0) {
                                    return 'tag-plus';
                                } else {
                                    return 'tag-minus';
                                }
                            }
                        });

                        var anAdvertise = new ImageTag(img, [
                            {bottom:0,left:0}
                        ], {
                            tagContent:'<div class="tag-box">' +
                                    '<s></s><b title="关闭广告" class="tag-close">x</b>' +
                                    '<a href="http://www.apple.com.cn/ipad/" target="_blank"><img src="http://placehold.it/580x70/ff6600/fff&text=it\'s time to get an ipad!"></a></div>',
                            tagClass:'ad-tag'
                        });
                        E.on(D.get('body'),'click',function(el) {
                            if (D.hasClass(el.target, 'tag-close')) {
                                anAdvertise.hideAll();
                            }
                        });
                    });
                </script>
                </div>
                <a class="s-view-code" href="demo.html#">显示源码</a>
            </div>

            <h3 class="s-title">Demo5 - tag + tip效果</h3>
            <div class="s-section">
                <div class="s-demo">
                <div>
                    <img id="J_tagandtip" src="http://img03.taobaocdn.com/tps/i3/T1uveJXchfXXXXXXXX-620-404.jpg" />
                </div>
                <script type="text/javascript">
                    KISSY.use('gallery/image-tagging/1.0/, overlay',function(S, ImageTag, Overlay) {
                        var D = S.DOM, E = S.Event;
                        var FaceTag = new ImageTag('#J_tagandtip',[
                            {top:60,left:40},
                            {top:30,left:200},
                            {top:40,left:400}
                        ],{
                            tagClass:'tag-face',
                            tagContent:function(el) {
                                if (el.index == 0) {
                                    return '<a class="face-tag-popup" href="#" title="大家没觉得我很帅？"></a><span class="face-tip">大家没觉得我很帅？</span>';
                                } else if (el.index == 1) {
                                    return '<a class="face-tag-popup" href="#" title="......"></a><span class="face-tip">......</span>';
                                } else {
                                    return '<a class="face-tag-popup" href="#" title="翔哥，等我！！"></a><span class="face-tip">翔哥，等我！！</span>';
                                }
                            }
                        });

                        E.on('#J_tagandtip', 'mouseover', function(ev) {
                            if (ev.target.id == 'J_tagandtip') {
                                FaceTag.showAll();
                                D.css('.face-tag-popup', 'opacity', 1);
                            }
                        });

                        E.on('#J_tagandtip', 'mouseout', function(ev) {
                            if (ev.target.id == 'J_tagandtip' && D.contains(ev.relatedTarget, '#J_tagandtip')) {
                                FaceTag.hideAll();
                                D.css('.face-tag-popup', 'opacity', 0);
                            }
                        });

                        E.on(FaceTag.wrapNode, 'mouseover', function(ev) {
                            if (D.hasClass(ev.target, 'tag-face') || D.parent(ev.target, '.tag-face')) {
                                var target = D.hasClass(ev.target, 'tag-face') || D.parent(ev.target, '.tag-face');
                                var index = D.attr(target, 'tagindex');
                                S.each(FaceTag.getTagNodes(), function(el, i) {
                                    if (i != index) {
                                        el.hide();
                                    } else {
                                        D.css(D.get('.face-tip',el.getContentElement()),'visibility','visible');
                                    }
                                });
                            }
                        });

                        E.on(FaceTag.wrapNode, 'mouseout', function(ev) {
                            if (D.hasClass(ev.target, 'tag-face') || D.parent(ev.target, '.tag-face')) {
                                var target = D.hasClass(ev.target, 'tag-face') || D.parent(ev.target, '.tag-face');
                                var index = D.attr(target, 'tagindex');
                                S.each(FaceTag.getTagNodes(), function(el, i) {
                                    if (i == index) {
                                        D.css(D.get('.face-tip',el.getContentElement()),'visibility','hidden');
                                    }
                                });
                            }
                        });


                    });
                </script>
                    </div>
                <a class="s-view-code" href="demo.html#">显示源码</a>
            </div>

			<h3 class="s-title">API</h3>			
			<div class="s-section">
				<h4 class="s-api-title">构造器</h4>
				<div class="s-api-method"> ImageTag( picNode, coords [, Config ]);</div>
                <h4 class="s-api-title">示例</h4>
				<div>
                <pre>
    new KISSY.gallery.ImageTag('#youImage',[
        {top:100,left:100},// 第一个标点的位置
        {bottom:50;left:300}// 第二个标点的位置
    ]);
    //其他详细使用可见上面的demo</pre>
                </div>
				<h4 class="s-api-title">参数</h4>
				<div class="s-api-params">
					<ul class="s-list">
						<li><em>picNode</em> {HTMLElement|String} - 图片节点或者图片选择器（只匹配选择结果的第一张图片）</li>
                        <li><em>coords</em> {Array} - 标记数据的数组，单个标记支持{top:value,left:value},{bottom:value,left:value}两种定位方式</li>
						<li><em>Config</em> {Object} - 配置项(可选，用于自定义)</li>
					</ul>
				</div>
                <h4 class="s-api-title">配置项细节</h4>
				<div class="s-api-params">
					<ul class="s-list">
						<li> 可选参数 <em>tagClass</em> {String|Function} - 标记的class，如果是function，function的首个参数为一个config配置（目前包括标记的index），并且其返回值作为 tagClass </li>
						<li> 可选参数 <em>tagContent</em> {String|Function} - 标记的class，如果是function，function的首个参数为一个config配置（目前包括标记的index），并且其返回值作为 tagContent </li>
					</ul>
				</div>
				<h4 class="s-api-title">返回</h4>
				<div class="s-api-return">ImageTag实例</div>
			</div>
            <div class="s-section">
                <h4 class="s-api-title">方法</h4>
                <div class="s-api-method"> showAll() 显示图片对应的所有tag</div>
                <h4 class="s-api-title">参数</h4>
                <div class="s-api-return">无</div>
                <h4 class="s-api-title">返回</h4>
                <div class="s-api-return">无</div>
            </div>
            <div class="s-section">
                <h4 class="s-api-title">方法</h4>
                <div class="s-api-method"> hideAll() 隐藏图片对应的所有tag</div>
                <h4 class="s-api-title">参数</h4>
                <div class="s-api-return">无</div>
                <h4 class="s-api-title">返回</h4>
                <div class="s-api-return">无</div>
            </div>
            <div class="s-section">
                <h4 class="s-api-title">方法</h4>
                <div class="s-api-method"> getTagNodes() 获取图片对应的所有tag</div>
                <h4 class="s-api-title">参数</h4>
                <div class="s-api-return">无</div>
                <h4 class="s-api-title">返回</h4>
                <div class="s-api-return">{Array} - 图片对应的所有tag（每一个节点均为一个<a target="_blank" href="http://docs.kissyui.com/docs/html/api/component/overlay/overlay.html">Overlay</a>实例）</div>
            </div>
			<h3 class="s-title">Note</h3>			
			<div class="s-section">
				<ul class="s-list">
					<li>制作过程参考了<a target="_blank" href="http://www.luminate.com/">luminate</a>的图片标点功能</li>
					<li>标记的生成使用了KISSY的<a target="_blank" href="http://docs.kissyui.com/docs/html/api/component/overlay/overlay.html">Overlay</a></li>
				</ul>
			</div>
    </div>
    <div id="footer">
        &copy; Copyright 2010~2012, KISSY Team.
    </div>
</body>
</html>